<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="我的测评"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-empty v-if="orderList.length == 0" text="暂无数据" mode="list"></u-empty>
    <view :key="order.id" v-for="order in orderList" class="each-order">
      <view class="mt10">测评名称：{{order.paper.name}}</view>
      <view class="mt10">测评时间：{{order.aligntime}}</view>
      <view class="mt10">测评得分：{{order.score}}</view>
      <view class="mt10">结果分析：{{order.analysis}}</view>
      <view style="display: flex;flex-direction: row-reverse;">
        <view class="cart" @click="showDetail(order)">查看详情</view>  
      </view>
    </view>
  </view>
</template>

<script>
import { getExam } from "../../api/system/api";
export default {
  data() {
    return {
      userInfo: {},
      index: 0,
      orderList: [],
      imgUrl: "http://127.0.0.1:3000/",
      show: false,
      order: {}
    };
  },
  onLoad(option) {
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
        console.log(this.userInfo)
        this.getData()
      }
    })
  },
  methods: {
    getData() {
      let params = {
        page: 1,
        pageSize: 100,
        userId: this.userInfo.id
      }
      getExam(params).then(res => {
        let data = res.data.data
        this.orderList = data
      })
    },
    showDetail(order) {
      this.$u.route("/pages/manage/exam", {
        paperId: order.paper.id,
        userId: order.user.id,
        isView: true,
        viewAnswer: order.answers
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}
.each-order {
  width: 96%;
  margin: 20rpx 2%;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  position: relative;
}
.state {
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.good {
  display: flex;
  margin-bottom: 10rpx;
}
.title {
  font-weight: bold;
  font-size: 30rpx;
  margin-bottom: 6rpx;
}
.row {
  font-size: 24rpx;
  color: #666;
}
.pay {
  width: 100%;
  text-align: right;
}
.op {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}
.btn {
  width: 150rpx;
  text-align: center;
  padding: 14rpx 20rpx; 
  background: red;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
  margin-left: 20rpx;
}
.comment {
  height: 50vh;
  padding: 30rpx 50rpx;
}
.p-title {
  font-weight: bold;
  margin-bottom: 30rpx;
}
.submit {
  width: 90%;
  margin-top: 100rpx;
  padding: 24rpx 20rpx;
  border-radius: 50rpx;
}
.pay {
	width: 100%;
	display: flex;
	background: #fff;
}
.cart {
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  background: red;
  border-radius: 10rpx;
}
.over {
  background: rgb(110, 246, 19);
  color: #000;
}
</style>
